import React ,{ useState }from "react";
import { useEffect } from "react";
import './modal.css'


/**
 * 
 * @param {visible bolean}} props 控制显示
 * @returns 
 */
const Modal=(props)=>{
    const { visible:show ,children,title}=props
    const { onClose,onConfirm,}=props
    const [visible,setVisible]=useState(false)
    useEffect(()=>{
        console.log('----');
        setVisible(show)
    },[show])
    const closeModal=()=>{
        setVisible(false)
        onClose && onClose()
    }
    const confirm =()=>{
        setVisible(false)
        onConfirm && onConfirm()
    }
    const maskClick=()=>{
        setVisible(false)
        onClose && onClose()

    }
    return (
            visible && <div className="modal-wrapper">
                <div className="modal">
                    <div className="modal-title">{title}</div>
                    <div className="modal-content">{children}</div>
                    <div className="modal-operator">
                        <button 
                            onClick={closeModal}
                            className="modal-operator-close"
                        >取消</button>
                        <button 
                            onClick={confirm}
                            className="modal-operator-confirm"
                        >确认</button>
                    </div>
                </div>
                <div className="mask" onClick={maskClick}>

                </div>
            </div>
        )
}

export default Modal